<template>
  <div class="card-component">
    <div class="card-content">
      <div class="card-content-title">功能权限</div>
      <el-button type="primary" class="submit-btn" @click="editData" v-if="flag"
        >编辑</el-button
      >
      <el-button type="primary" class="reset-btn" @click="editData" v-if="!flag"
        >取消</el-button
      >
      <el-button type="primary" class="submit-btn" @click="submitForm" v-if="!flag"
        >保存</el-button
      >
    </div>
    <!-- 详情 -->
    <div v-if="flag">
      <div class="content">
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">外来车辆停放：</div>
              <div class="title">
                {{
                  detailList.data.tempEntry == true
                    ? "启用"
                    : detailList.data.tempEntry == false
                    ? "关闭"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">线上卡办理：</div>
              <div class="title">
                {{
                  detailList.data.cardOnline == true
                    ? "启用"
                    : detailList.data.cardOnline == false
                    ? "关闭"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>

          <el-col :span="6">
            <el-row>
              <div class="label">电子停车券：</div>
              <div class="title">
                {{
                  detailList.data.elecCoupon == true
                    ? "启用"
                    : detailList.data.elecCoupon == false
                    ? "关闭"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">车场预约：</div>
              <div class="title">
                {{
                  detailList.data.reservable == true
                    ? "启用"
                    : detailList.data.reservable == false
                    ? "关闭"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">免费离场时间：</div>
              <div class="title">{{ detailList.data.leaveTime }}分钟</div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">电子发票：</div>
              <div class="title">
                {{
                  detailList.data.elecInvoice == true
                    ? "启用"
                    : detailList.data.elecInvoice == false
                    ? "关闭"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>
    </div>

    <!-- 编辑 -->
    <div v-if="!flag">
      <AuthorizationEdit :editOrderDetails="detailList.data" @edit="getEdit" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, onMounted, watch } from "vue";
import AuthorizationEdit from "./authorization-edit.vue";
import { getEditCparkPerm } from "../request.js";
import { useRoute } from "vue-router";
const route = useRoute();

const emits = defineEmits(["buttons"]);

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

const flag = ref(true);

const editData = () => {
  flag.value = !flag.value;
};

const editForm = reactive({
  data: {},
});

const submitForm = () => {
  console.log(editForm.data);
  if (editForm.data.cardOnline > -1) {
    getEditCparkPerm({
      id: route.query.id,
      data: editForm.data,
    }).then((res) => {
      if (res.data.code === 0) {
        ElMessage({
          type: "success",
          message: res.data.result,
        });
        flag.value = !flag.value;
        emits("buttons", "submit");
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  } else {
    flag.value = !flag.value;
    emits("buttons", "submit");
  }
};

// 编辑相关操作

const getEdit = (value) => {
  console.log(value);
  editForm.data = value;
};

const detailList = reactive({
  data: {},
});

const getData = () => {
  detailList.data = props.orderDetails;
};

onMounted(() => {
  watch(
    () => props.orderDetails,
    (newVal, oldVal) => {
      if (newVal) {
        getData();
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
});
</script>

<style lang="less" scoped>
.card-component {
  .card-content {
    margin-bottom: 37px;
    display: flex;
    align-items: center;
  }
  .card-content-title {
    font-weight: 600;
    font-size: 26px;
    color: #333333;
    margin-right: 12px;
  }
  .content > .el-row {
    margin-top: 20px;
  }
  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  .reset-btn {
    background: #f2f3f5;
    border: 1px solid #f2f3f5;
    border-radius: 2px;
    color: #333333;
    padding: 5px 16px;
  }
  .submit-btn {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    padding: 5px 16px;
  }
}
</style>
